<template>
  <view class="mskc">
    <!-- <view class="container">
      <view class="notification">
        <view v-on:click="show = !show" class="tooltip-bell">
          <text class="far fa-2x fa-bell"></text>
          <text id="circle"></text>
        </view>
        <transition name="fadeStart" v-cloak>
          <view v-if="show" class="tooltip">
            <view id="heading">
              <view class="heading-left">
                <h6 class="heading-title">132</h6>
              </view>
              <view class="heading-right">
                <a class="notification-link" href="#"></a>
              </view>
            </view>
            <ul class="notification-list">
              <view class="notification-item" :key="user" v-for="user of users">
                <view class="img-left">
                  <img class="user-photo" alt="User Photo" v-bind:src="user.picture.thumbnail">
                </view>
                <view class="user-content">
                  <view class="user-info">
                    <text
                      class="name"
                    >{{user.name.first | capitalize}} {{user.name.last | capitalize}}</text>left a comment.
                  </view>
                  <view class="time">1 hour ago</view>
                </view>
              </view>
            </ul>
          </view>
        </transition>
      </view>

      
    </view>-->
    <view class="mask"></view>
    <view class="tooltip">
      <view id="heading">
        <view>
          <text style="color:#949393;font-size:16px" class="lmqicon uni-icon-faqiliaotian"></text>
          <text>发起群聊</text>
        </view>
        <view>
          <text style="color:#949393;font-size:16px" class="lmqicon uni-icon-tianjiahaoyou"></text>
          <text>添加好友</text>
        </view>
        <view>
          <text style="color:#949393;font-size:16px" class="lmqicon uni-icon-saoyisao"></text>
          <text>扫一扫</text>
        </view>
        <view>
          <text style="color:#949393;font-size:16px" class="lmqicon uni-icon-shouqian"></text>
          <text>收钱</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      errors: [],
      show: true
    };
  },
  mounted: function mounted() {
    // this.getUsers();
  },

  methods: {
    getUsers: function getUsers() {
      var _this = this;
      uni.request({
        url: "https://randomuser.me/api/?results=3",
        success: function(res) {
          console.log(JSON.stringify(res.data.results));
          _this.users = res.data.results;
        },
        fail: function(res) {
          uni.showToast({ title: "服务器错误", icon: "none" });
          console.log(JSON.stringify(res));
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
$bg-color-mask: rgba(0, 0, 0, 0.5); //遮罩颜色
$bg-color-hover: #f1f1f1; //点击状态颜色
.mskc {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
.mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $bg-color-mask;
  opacity: 0;
  transition: opacity 200ms ease-in;
}
#heading view {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  text-align: right;
}
#heading text {
  display: inline-block;
  /* width: 30px;
  height: 30px;
  line-height: 30px; */
  flex: 1;
  text-align: left;
}
.container {
  width: 20rem;
  height: 20rem;
  grid-area: main;
  -ms-flex-item-align: center;
  align-self: center;
  justify-self: center;
  margin: 10px auto;
}

view {
  /* display: inline-block; */
  padding: 10upx;
  color: #1f2022;
}

.tooltip-bell {
  position: absolute;
  display: block;
  left: 9rem;
  color: #a5a6a8;
}

.tooltip {
  position: absolute;
  top: 40px;
  right: 0px;
  line-height: 1.5;
  color: #27303d;
  width: 281upx;
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  z-index: 9999999999999999;
}

.tooltip::before {
  /* content: "";
  position: absolute;
  top: -0.4px;
  right: 4px;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 1.5rem solid #fff; */
  content: "";
  position: absolute;
  top: -0.4px;
  right: 4px;
  border-left: 20upx solid transparent;
  border-right: 20upx solid transparent;
  border-bottom: 15upx solid #fff;
  transform: translateX(3px) translateY(-4px) rotateZ(131deg);
}

#circle {
  position: absolute;
  top: 0;
  left: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 100%;
  background: #f07379;
}

[v-cloak] > * {
  display: none;
}
</style>